<template>
  <div class="dashboard-container">
    <!-- 工作台卡片 -->
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span><el-icon><HomeFilled /></el-icon> 工作台</span>
        </div>
      </template>
      <div class="welcome">
        <div class="user-avatar">
          <el-avatar :size="64" src="https://img.yzcdn.cn/vant/cat.jpeg"></el-avatar>
        </div>
        
        <div class="greeting-section">
          <h2>{{ greeting }}</h2>
          <div class="today-date">
            <el-icon><Calendar /></el-icon>
            <span>{{ new Date().toLocaleDateString() }}</span>
          </div>
        </div>
        
        <p class="welcome-text">欢迎使用考勤管理系统</p>
        
        <!-- 每日激励语 -->
        <div class="daily-inspiration">
          <div class="quote-icon left">
            <el-icon><ChatLineSquare /></el-icon>
          </div>
          <div class="quote">
            <p class="quote-text">{{ dailyInspiration.quote }}</p>
            <div class="quote-author">— {{ dailyInspiration.author }}</div>
          </div>
          <div class="quote-icon right">
            <el-icon><ChatLineSquare /></el-icon>
          </div>
          <el-button link type="primary" @click="refreshQuote" class="refresh-btn">
            <el-icon><Refresh /></el-icon> 换一条
          </el-button>
        </div>
        
        <!-- 公告通知 -->
        <div class="announcements-section">
          <div class="section-header">
            <div class="header-left">
              <el-icon><Bell /></el-icon>
              <span>公告通知</span>
            </div>
          </div>
          
          <div class="announcement-list" v-loading="loading">
            <template v-if="announcements.length">
              <el-table :data="announcements" style="width: 100%" :stripe="true" :border="false">
                <el-table-column prop="summary" label="公告摘要" min-width="300"/>
                <el-table-column prop="publishTime" label="发布时间" width="180">
                  <template #default="scope">
                    {{ formatDate(scope.row.publishTime) }}
                  </template>
                </el-table-column>
                <el-table-column prop="publisher" label="发布人" width="120"/>
                <el-table-column label="操作" width="100" fixed="right">
                  <template #default="scope">
                    <el-button link type="primary" @click="viewAnnouncementDetail(scope.row)">
                      查看详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <el-empty v-else description="暂无公告" />
          </div>
        </div>
      </div>
    </el-card>

    <!-- 添加详情弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="公告详情"
      width="50%"
      :before-close="handleClose"
      destroy-on-close
      center
      class="announcement-dialog"
    >
      <div class="announcement-detail" v-if="currentAnnouncement">
        <div class="announcement-header">
          <h3>{{ currentAnnouncement.title }}</h3>
          <div class="announcement-meta">
            <div class="meta-item">
              <el-icon><User /></el-icon> {{ currentAnnouncement.publisher }}
            </div>
            <div class="meta-item">
              <el-icon><Clock /></el-icon> {{ formatDate(currentAnnouncement.publishTime) }}
            </div>
          </div>
        </div>
        <el-divider content-position="center">公告内容</el-divider>
        <div class="content">
          <p>{{ currentAnnouncement.content }}</p>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" plain>关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { Bell, ArrowRight, Calendar, HomeFilled, Refresh, ChatLineSquare, User, Clock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { getAnnouncementList } from '@/api/Announcement'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import { useUserStore } from '@/store/user'

const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)
const announcements = ref([])

// 添加弹窗相关的响应式变量
const dialogVisible = ref(false)
const currentAnnouncement = ref(null)

// 每日激励语数据
const inspirationalQuotes = [
  { quote: "今天的努力是明天的基础，把握每一刻。", author: "管理智慧" },
  { quote: "做好计划的人，往往能够提高工作效率两倍。", author: "时间管理" },
  { quote: "成功的秘诀在于每天都有所进步，哪怕只是一点点。", author: "乔布斯" },
  { quote: "任何值得做的事，即使做不好，也值得去做。", author: "罗斯福" },
  { quote: "不要以成败论英雄，要以坚持的过程论英雄。", author: "职场智慧" },
  { quote: "团队的力量不在于人数，而在于彼此的信任与合作。", author: "团队建设" },
  { quote: "把简单的事情做好就是不简单，把平凡的事情做好就是不平凡。", author: "管理哲学" },
  { quote: "态度决定高度，努力成就未来。", author: "职场格言" },
  { quote: "热爱你所做的，做你所热爱的。", author: "职业发展" },
  { quote: "善待你的时间，因为它给予你成就的机会。", author: "时间管理" },
  { quote: "做工作的主人，而不是工作的奴隶。", author: "职场智慧" },
  { quote: "细节决定成败，态度决定高度。", author: "管理精髓" },
  { quote: "生活不是等待风暴过去，而是学会在雨中翩翩起舞。", author: "励志名言" },
  { quote: "要记住，永远不要为失败找借口，而为成功创造条件。", author: "职场指南" },
  { quote: "规划你的工作，然后努力工作你的规划。", author: "项目管理" },
  { quote: "勇气不是没有恐惧，而是战胜恐惧。", author: "曼德拉" },
  { quote: "学习力比知识本身更重要，终身学习是成长的关键。", author: "学习成长" },
  { quote: "一个人的成长在于不断超越自我。", author: "个人发展" },
  { quote: "每一个优秀的人，都有一段沉默的时光。", author: "成长智慧" },
  { quote: "没有完美的个人，只有更好的团队。", author: "团队合作" }
]

// 获取随机激励语
const dailyInspiration = ref(getRandomQuote())

// 随机获取一条激励语
function getRandomQuote() {
  const randomIndex = Math.floor(Math.random() * inspirationalQuotes.length)
  return inspirationalQuotes[randomIndex]
}

// 刷新激励语
const refreshQuote = () => {
  dailyInspiration.value = getRandomQuote()
}

// 根据时间生成问候语
const greeting = computed(() => {
  const hour = new Date().getHours()
  const name = localStorage.getItem('name') || '同事'
  
  if (hour < 6) return `夜深了，${name}`
  if (hour < 9) return `早上好，${name}`
  if (hour < 12) return `上午好，${name}`
  if (hour < 14) return `中午好，${name}`
  if (hour < 17) return `下午好，${name}`
  if (hour < 19) return `傍晚好，${name}`
  return `晚上好，${name}`
})

// 获取最新公告
const fetchLatestAnnouncements = async () => {
  loading.value = true
  try {
    const data = await getAnnouncementList({
      current: 1,
      size: 5,
      employeeNo: localStorage.getItem('employeeNo') || ''
    })
    announcements.value = data.data.records || []
  } catch (error) {
    console.error('获取公告失败:', error)
    ElMessage.error('获取公告失败')
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return '-'
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

// 获取公告类型标签样式
const getTagType = (type) => {
  const types = {
    1: 'success',  // 普通公告
    2: 'warning',  // 重要公告
    3: 'danger'    // 紧急公告
  }
  return types[type] || 'info'
}

// 获取公告类型名称
const getTypeName = (type) => {
  const types = {
    1: '普通',
    2: '重要',
    3: '紧急'
  }
  return types[type] || '其他'
}

// 修改查看详情方法
const viewAnnouncementDetail = (announcement) => {
  currentAnnouncement.value = announcement
  dialogVisible.value = true
}

// 添加关闭弹窗的处理方法
const handleClose = () => {
  dialogVisible.value = false
  currentAnnouncement.value = null
}

// 查看更多公告
const viewMoreAnnouncements = () => {
  router.push('/announcement')
}

onMounted(() => {
  fetchLatestAnnouncements()
})
</script>

<style scoped lang="scss">
.dashboard-container {
  display: grid;
  gap: 24px;
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 64px);

  .el-card {
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: none;
    
    &:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      transform: translateY(-3px);
    }
    
    .el-card__header {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      padding: 16px 20px;
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #303133;

    .header-left {
      display: flex;
      align-items: center;
      gap: 8px;

      .el-icon {
        font-size: 18px;
      }
    }

    .view-more {
      display: flex;
      align-items: center;
      gap: 4px;
      
      &:hover {
        color: #409eff;
      }
    }
  }

  .welcome-card {
    .welcome {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 20px;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4f0fb 100%);
      border-radius: 0 0 12px 12px;

      .user-avatar {
        margin-bottom: 16px;
        
        .el-avatar {
          background-color: #409eff;
          
          .el-icon {
            font-size: 32px;
            color: #fff;
          }
        }
      }

      .greeting-section {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 6px;
        
        h2 {
          font-size: 28px;
          color: #2c3e50;
          font-weight: 600;
          margin: 0;
        }
        
        .today-date {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 6px 12px;
          background-color: rgba(255, 255, 255, 0.6);
          border-radius: 20px;
          font-size: 14px;
          color: #606266;
          font-weight: 500;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
          
          .el-icon {
            color: #409eff;
            font-size: 16px;
          }
        }
      }

      .welcome-text {
        font-size: 16px;
        color: #606266;
        margin-bottom: 24px;
      }

      .daily-inspiration {
        width: 100%;
        max-width: 600px;
        margin: 20px 0;
        padding: 20px;
        background: linear-gradient(135deg, rgba(255, 248, 240, 0.85) 0%, rgba(254, 241, 224, 0.85) 100%);
        border-radius: 12px;
        position: relative;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border-left: 4px solid rgba(242, 191, 131, 0.8);
        
        .quote-icon {
          font-size: 24px;
          color: rgba(242, 191, 131, 0.3);
          
          &.left {
            position: absolute;
            left: 15px;
            top: 15px;
            transform: rotate(180deg);
          }
          
          &.right {
            position: absolute;
            right: 15px;
            bottom: 15px;
          }
        }
        
        .quote {
          text-align: center;
          padding: 10px 30px;
          
          .quote-text {
            font-size: 18px;
            line-height: 1.6;
            color: #303133;
            font-weight: 500;
            margin-bottom: 12px;
            font-style: italic;
          }
          
          .quote-author {
            font-size: 14px;
            color: #909399;
          }
        }
        
        .refresh-btn {
          position: absolute;
          right: 15px;
          top: 15px;
          
          .el-icon {
            transition: transform 0.3s ease;
          }
          
          &:hover .el-icon {
            transform: rotate(180deg);
          }
        }
      }

      .announcements-section {
        width: 100%;
        margin-top: 30px;
        
        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 0 10px 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
          margin-bottom: 16px;
          
          .header-left {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 18px;
            font-weight: 600;
            color: #303133;
            
            .el-icon {
              font-size: 18px;
              color: #f56c6c;
            }
          }
        }
        
        .announcement-list {
          background-color: rgba(255, 255, 255, 0.7);
          border-radius: 8px;
          padding: 16px;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
          
          .el-table {
            background-color: transparent;
            --el-table-header-bg-color: transparent;
            
            ::v-deep .el-table__header-wrapper th {
              background-color: rgba(245, 247, 250, 0.5);
              color: #606266;
              font-weight: 600;
            }
            
            ::v-deep .el-table__body tr:hover > td {
              background-color: rgba(245, 247, 250, 0.5);
            }
            
            ::v-deep .el-button--link {
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

// 美化公告详情弹窗样式
:deep(.announcement-dialog) {
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
    background: linear-gradient(90deg, #f0f6ff 0%, #ffffff 100%);
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: bold;
      color: #303133;
    }
    
    .el-dialog__headerbtn {
      font-size: 18px;
      
      &:hover .el-dialog__close {
        color: #409eff;
        transform: rotate(90deg);
      }
      
      .el-dialog__close {
        transition: all 0.3s ease;
      }
    }
  }
  
  .el-dialog__body {
    padding: 24px;
  }
  
  .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid #ebeef5;
    
    .dialog-footer {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}

.announcement-detail {
  padding: 0;

  .announcement-header {
    margin-bottom: 20px;
    
    h3 {
      margin-bottom: 16px;
      font-size: 20px;
      font-weight: bold;
      color: #303133;
      text-align: center;
    }
    
    .announcement-meta {
      display: flex;
      justify-content: center;
      gap: 24px;
      color: #909399;
      font-size: 14px;
      
      .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        
        .el-icon {
          font-size: 16px;
        }
      }
    }
  }

  .content {
    margin-bottom: 20px;
    line-height: 1.8;
    white-space: pre-wrap;
    color: #606266;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #409eff;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
    gap: 16px;
    
    .welcome-card .welcome {
      padding: 20px 16px;
      
      .greeting-section {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
        
        h2 {
          font-size: 24px;
        }
      }
      
      .daily-inspiration {
        padding: 15px;
        
        .quote {
          padding: 5px 25px;
          
          .quote-text {
            font-size: 16px;
          }
        }
      }
      
      .announcements-section {
        .section-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
        
        .announcement-list {
          padding: 10px;
          overflow-x: auto;
          
          ::v-deep .el-table {
            font-size: 13px;
          }
          
          ::v-deep .el-table .cell {
            padding: 8px;
          }
        }
      }
    }
  }
}
</style> 